<template>
  <div class="wrapper">
    <div class="header">
      <label>消息盒子</label>
    </div>
    <div class="messageCount">
      <el-badge :value="count" :max="9" class="badge">
        <el-button size="small">未读</el-button>
      </el-badge>
    </div>
    <div class="contents">
      <el-table :data="messageList" style="width: 100%"
                @current-change="handleCurrentChange"
                highlight-current-row
                :row-style="tableRowStyle">
        <el-table-column type="index" ></el-table-column>
        <el-table-column prop="content" label="内容"></el-table-column>
        <el-table-column prop="createTime" label="时间" width="180"></el-table-column>
        <el-table-column prop="status" label="状态" width="180"></el-table-column>
      </el-table>
    </div>
    <div class="footer">

    </div>
  </div>
</template>

<script>
  import Common from "../common/Common";
    export default {
        name: "MessageInform",
        data(){
            return{
                messageInfo:{
                    id:'',
                    userid:'',
                    content:'',
                    createTime:'',
                    status:''
                },
                messageList:[],
                count:0
            }
        },
        methods:{
            tableRowStyle({row,rowIndex}){
                let rowBackground={};
                if(row.status=='未阅'){
                    rowBackground.background='oldlace';
                    return rowBackground;
                }
                return null;
            },
            handleCurrentChange(obj){
                this.$alert(obj.content,'消息内容',{
                    confirmButtonText: '确定'
                });
                if(obj.status=='未阅'){
                    obj.status='已阅';
                    this.count--;
                    const data=JSON.stringify(obj);
                    this.axios.post('http://localhost:8071/updateMessage',data,{
                        headers: {'Content-Type': 'application/json;charset=UTF-8'},
                        dataType: JSON
                    }).then(res=>{
                        console.log(res);
                    }).catch(error=>{
                        console.log(error);
                    });
                }
            }
        },
        mounted() {
            var currentUser=Common.userInfo.id;
            this.axios.get('http://localhost:8071/getMessageInfo?userid='+currentUser).then(res=>{
                this.messageList=res.data;
                for(var obj of this.messageList){
                    if(obj.status=='未阅'){
                        this.count++;
                    }
                }
            }).catch(error=>{
                console.log(error);
            })
        }
    }
</script>

<style scoped>
  .wrapper{
    margin-right: 20%;
    margin-left: 20%;
  }
  .header{
    height: 100px;
    line-height: 100px;
  }
  label{
    font-size: 30px;
    margin-left: 1%;
    color: #409EFF;
  }
  .footer{
    margin-top: 20px;
  }
  .badge{
    margin-left: 1%;
  }
  .warning-row{
    background-color: oldlace;
  }
  .contents{
    height: 500px;
    overflow-y: hidden;
   overflow-y: scroll;
  }

</style>
